<template>
  <div>
    <canvas style="position: absolute;z-index:10;" id="canv" width="1920" height="572"></canvas>
    <div class="page" style="position: absolute;z-index:200;">
      <div class="container">
        <div class="left">
          <div class="login">云视源</div>
          <div class="eula">云视源管理后台<br/>输入用户名密码登陆后即可实现对后台的管理</div>
        </div>
        <div class="right">
          <svg viewBox="0 0 320 300">
            <defs>
              <linearGradient
                  inkscape:collect="always"
                  id="linearGradient"
                  x1="13"
                  y1="193.49992"
                  x2="307"
                  y2="193.49992"
                  gradientUnits="userSpaceOnUse">
                <stop
                    style="stop-color:#ff00ff;"
                    offset="0"
                    id="stop876"/>
                <stop
                    style="stop-color:#ff0000;"
                    offset="1"
                    id="stop878"/>
              </linearGradient>
            </defs>
            <path
                d="m 40,120.00016 239.99984,-3.2e-4 c 0,0 24.99263,0.79932 25.00016,35.00016 0.008,34.20084 -25.00016,35 -25.00016,35 h -239.99984 c 0,-0.0205 -25,4.01348 -25,38.5 0,34.48652 25,38.5 25,38.5 h 215 c 0,0 20,-0.99604 20,-25 0,-24.00396 -20,-25 -20,-25 h -190 c 0,0 -20,1.71033 -20,25 0,24.00396 20,25 20,25 h 168.57143"/>
          </svg>
          <div class="form">
            <label for="email">用户名</label>
            <input type="email" id="email" v-model="username">
            <label for="password">密码</label>
            <input type="password" id="password" v-model="password">
            <input type="submit" id="submit" value="登录" @click="login">
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import anime from 'animejs'
// import {b} from '@/assets/js/backgoround'

export default {
  name: "Login",
  data() {
    return {
      username: '',
      password: ''
    }
  },
  beforeCreate() {
    document.querySelector('body').className = 'body'
    document.querySelector('html').className = 'html'
  },
  created() {
    let isLogin = localStorage.getItem("user");
    let time_login = new Date(localStorage.getItem("loginTime")).valueOf()
    let time_now = new Date().valueOf()
    if (isLogin != null) {
      if (time_now < time_login) {
        this.$axios({
          url: this.$api.LoginByToken,
          method: "post"
        }).then(res => {
          if (res.code === 200 || res.code == false) {
            this.$router.push({
              path: "/home"
            })
            return
          }
        })
      }
      this.$message.error('您的登录已经过期！请重新登录');
    }
    localStorage.clear()
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    document.querySelector('body').removeAttribute("class", "body");
    document.querySelector('html').removeAttribute("class", "html");
  },
  methods: {
    init() {
      // b()
      var current = null;
      document.querySelector('#email').addEventListener('focus', function (e) {
        if (current) current.pause();
        current = anime({
          targets: 'path',
          strokeDashoffset: {
            value: 0,
            duration: 700,
            easing: 'easeOutQuart'
          },
          strokeDasharray: {
            value: '240 1386',
            duration: 700,
            easing: 'easeOutQuart'
          }
        });
      });
      document.querySelector('#password').addEventListener('focus', function (e) {
        if (current) current.pause();
        current = anime({
          targets: 'path',
          strokeDashoffset: {
            value: -336,
            duration: 700,
            easing: 'easeOutQuart'
          },
          strokeDasharray: {
            value: '240 1386',
            duration: 700,
            easing: 'easeOutQuart'
          }
        });
      });
      document.querySelector('#submit').addEventListener('focus', function (e) {
        if (current) current.pause();
        current = anime({
          targets: 'path',
          strokeDashoffset: {
            value: -730,
            duration: 700,
            easing: 'easeOutQuart'
          },
          strokeDasharray: {
            value: '530 1386',
            duration: 700,
            easing: 'easeOutQuart'
          }
        });
      });
    },
    login() {
      if (!this.username) {
        this.$message.error('请输入用户名');
        return
      }
      if (!this.password) {
        this.$message.error('请输入密码');
        return
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$axios({
        url: this.$api.Login,
        method: 'post',
        headers: {'content-type': 'multipart/form-data'},
        data: {
          username: this.username,
          password: this.password
        }
      }).then(res => {
        if (res.code === 200 || res.code == false) {
          this.$message.success('登录成功');
          localStorage.clear();
          localStorage.setItem("user", JSON.stringify(res.data))
          let date_now = new Date()
          let date_set = new Date(date_now)
          date_set.setDate(date_now.getDate() + 7)
          localStorage.setItem("loginTime", date_set)
          this.$router.push({ path: "/home" })
        } else {
          this.$message.error('登录失败,用户名或密码错误');
        }
        loading.close();
      })
    }
  },
}

</script>

<style>
.html {
  height: 100%;
  background-image: -webkit-radial-gradient(ellipse farthest-corner at center center, #1b44e4 0%, #020f3a 100%);
  background-image: radial-gradient(ellipse farthest-corner at center center, #1b44e4 0%, #020f3a 100%);
  cursor: move;
}

.body {
  width: 100%;
  margin: 0;
  overflow: hidden;
  font-family: 'Inter UI', sans-serif;
}

@import url('https://rsms.me/inter/inter-ui.css');
::selection {
  background: #2D2F36;
}

::-webkit-selection {
  background: #2D2F36;
}

::-moz-selection {
  background: #2D2F36;
}

.page {
  display: flex;
  flex-direction: column;
  height: calc(100% - 40px);
  position: absolute;
  place-content: center;
  width: calc(100% - 40px);
}

@media (max-width: 767px) {
  .page {
    height: auto;
    margin-bottom: 20px;
    padding-bottom: 20px;
  }
}

.container {
  display: flex;
  height: 320px;
  margin: 0 auto;
  width: 640px;
}

@media (max-width: 767px) {
  .container {
    flex-direction: column;
    height: 630px;
    width: 320px;
  }
}

.left {
  background: white;
  height: calc(100% - 40px);
  top: 20px;
  position: relative;
  width: 50%;
}

@media (max-width: 767px) {
  .left {
    height: 100%;
    left: 20px;
    width: calc(100% - 40px);
    max-height: 270px;
  }
}

.login {
  font-size: 50px;
  font-weight: 900;
  margin: 50px 40px 40px;
}

.eula {
  color: #999;
  font-size: 14px;
  line-height: 1.5;
  margin: 40px;
}

.right {
  background: #474A59;
  box-shadow: 0px 0px 40px 16px rgba(0, 0, 0, 0.22);
  color: #F1F1F2;
  position: relative;
  width: 50%;
}

@media (max-width: 767px) {
  .right {
    flex-shrink: 0;
    height: 100%;
    width: 100%;
    max-height: 350px;
  }
}

svg {
  position: absolute;
  width: 320px;
}

path {
  fill: none;
  stroke: url(#linearGradient);;
  stroke-width: 4;
  stroke-dasharray: 240 1386;
}

.form {
  margin: 40px;
  position: absolute;
}

label {
  color: #c2c2c5;
  display: block;
  font-size: 14px;
  height: 16px;
  margin-top: 20px;
  margin-bottom: 5px;
}

input {
  background: transparent;
  border: 0;
  color: #f2f2f2;
  font-size: 20px;
  height: 30px;
  line-height: 30px;
  outline: none !important;
  width: 100%;
}

input::-moz-focus-inner {
  border: 0;
}

#submit {
  color: #707075;
  margin-top: 40px;
  transition: color 300ms;
}

#submit:focus {
  color: #f2f2f2;
}

#submit:active {
  color: #d0d0d2;
}

</style>